<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星梦解码师 - AI解梦平台</title>
    <style>
        :root {
            --primary-color: #6a5acd;
            --secondary-color: #9370db;
            --dark-color: #483d8b;
            --light-color: #e6e6fa;
            --text-color: #333;
            --light-text: #f8f8ff;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: var(--text-color);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: var(--light-text);
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Q50,80 0,100 Z" fill="rgba(255,255,255,0.1)"/></svg>');
            background-size: 100% 100%;
            opacity: 0.3;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            position: relative;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            position: relative;
        }
        
        .main-menu {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 40px;
            flex-wrap: wrap;
        }
        
        .menu-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            width: 300px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }
        
        .menu-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }
        
        .menu-card::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
        }
        
        .menu-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .menu-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--dark-color);
        }
        
        .menu-desc {
            color: #666;
            line-height: 1.5;
        }
        
        .dream-interpretation {
            display: none;
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-top: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .dream-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        label {
            font-weight: bold;
            color: var(--dark-color);
        }
        
        textarea, input {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            resize: vertical;
        }
        
        textarea {
            min-height: 150px;
        }
        
        button {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        button:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        
        .result-container {
            margin-top: 30px;
            padding: 20px;
            background: var(--light-color);
            border-radius: 10px;
            display: none;
        }
        
        .result-title {
            color: var(--dark-color);
            margin-bottom: 15px;
            border-bottom: 2px solid var(--secondary-color);
            padding-bottom: 10px;
        }
        
        .result-content {
            line-height: 1.6;
        }
        
        .dream-history {
            display: none;
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-top: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .history-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .history-item {
            background: var(--light-color);
            padding: 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .history-item:hover {
            background: #d8bfd8;
        }
        
        .history-dream {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .history-date {
            font-size: 0.8rem;
            color: #666;
        }
        
        .back-btn {
            margin-top: 20px;
            background: #666;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .spinner {
            border: 5px solid var(--light-color);
            border-top: 5px solid var(--primary-color);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle var(--duration) infinite ease-in-out;
            opacity: 0;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0; }
            50% { opacity: var(--opacity); }
        }
        
        @media (max-width: 768px) {
            .main-menu {
                flex-direction: column;
                align-items: center;
            }
            
            .menu-card {
                width: 100%;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="stars" id="stars"></div>
    
    <div class="container">
        <header id="main-header">
            <h1>✨ 星梦解码师 ✨</h1>
            <p class="subtitle">探索你梦境深处的秘密</p>
        </header>
        
        <div class="main-menu" id="main-menu">
            <div class="menu-card" id="interpret-btn">
                <div class="menu-icon">🌙</div>
                <h2 class="menu-title">解梦分析</h2>
                <p class="menu-desc">输入你的梦境内容，让AI解码你潜意识的信息</p>
            </div>
            
            <div class="menu-card" id="history-btn">
                <div class="menu-icon">📖</div>
                <h2 class="menu-title">解梦记录</h2>
                <p class="menu-desc">查看你之前的解梦记录和分析结果</p>
            </div>
        </div>
        
        <div class="dream-interpretation" id="dream-interpretation">
            <h2>梦境解析</h2>
            <p>请详细描述你的梦境，包括场景、人物、情感和任何细节</p>
            
            <form class="dream-form" id="dream-form">
                <div class="form-group">
                    <label for="dream-content">梦境内容</label>
                    <textarea id="dream-content" placeholder="我梦见自己在一片森林中奔跑..." required></textarea>
                </div>
                
                <div class="form-group">
                    <label for="dream-emotion">梦中的主要情绪</label>
                    <input type="text" id="dream-emotion" placeholder="如：恐惧、快乐、困惑等">
                </div>
                
                <div class="form-group">
                    <label for="dream-theme">梦境主题（可选）</label>
                    <input type="text" id="dream-theme" placeholder="如：飞行、坠落、考试等">
                </div>
                
                <button type="submit">解读我的梦</button>
            </form>
            
            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>正在解析你的梦境，请稍候...</p>
            </div>
            
            <div class="result-container" id="result-container">
                <h3 class="result-title">梦境解析结果</h3>
                <div class="result-content" id="result-content"></div>
            </div>
            
            <button class="back-btn" id="back-btn-1">返回首页</button>
        </div>
        
        <div class="dream-history" id="dream-history">
            <h2>解梦记录</h2>
            
            <div class="history-list" id="history-list">
                <p id="no-history">暂无解梦记录，快去分析你的第一个梦境吧！</p>
            </div>
            
            <button class="back-btn" id="back-btn-2">返回首页</button>
        </div>
    </div>
    
    <script>
        // 创建星空背景
        function createStars() {
            const starsContainer = document.getElementById('stars');
            const starCount = 100;
            
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                
                const size = Math.random() * 3;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                
                star.style.left = `${Math.random() * 100}%`;
                star.style.top = `${Math.random() * 100}%`;
                
                star.style.setProperty('--duration', `${5 + Math.random() * 10}s`);
                star.style.setProperty('--opacity', Math.random().toFixed(2));
                
                star.style.animationDelay = `${Math.random() * 5}s`;
                
                starsContainer.appendChild(star);
            }
        }
        
        // 页面导航
        function setupNavigation() {
            const mainMenu = document.getElementById('main-menu');
            const interpretBtn = document.getElementById('interpret-btn');
            const historyBtn = document.getElementById('history-btn');
            const dreamInterpretation = document.getElementById('dream-interpretation');
            const dreamHistory = document.getElementById('dream-history');
            const backBtn1 = document.getElementById('back-btn-1');
            const backBtn2 = document.getElementById('back-btn-2');
            
            interpretBtn.addEventListener('click', () => {
                mainMenu.style.display = 'none';
                dreamInterpretation.style.display = 'block';
                dreamHistory.style.display = 'none';
            });
            
            historyBtn.addEventListener('click', () => {
                mainMenu.style.display = 'none';
                dreamInterpretation.style.display = 'none';
                dreamHistory.style.display = 'block';
                loadHistory();
            });
            
            backBtn1.addEventListener('click', () => {
                mainMenu.style.display = 'flex';
                dreamInterpretation.style.display = 'none';
                dreamHistory.style.display = 'none';
            });
            
            backBtn2.addEventListener('click', () => {
                mainMenu.style.display = 'flex';
                dreamInterpretation.style.display = 'none';
                dreamHistory.style.display = 'none';
            });
        }
        
        // 解梦表单处理
        function setupDreamForm() {
            const dreamForm = document.getElementById('dream-form');
            const loading = document.getElementById('loading');
            const resultContainer = document.getElementById('result-container');
            const resultContent = document.getElementById('result-content');
            
            dreamForm.addEventListener('submit', async (e) => {
                e.preventDefault();
                
                const dreamContent = document.getElementById('dream-content').value;
                const dreamEmotion = document.getElementById('dream-emotion').value;
                const dreamTheme = document.getElementById('dream-theme').value;
                
                loading.style.display = 'block';
                resultContainer.style.display = 'none';
                
                try {
                    const interpretation = await interpretDream(dreamContent, dreamEmotion, dreamTheme);
                    
                    resultContent.innerHTML = interpretation;
                    resultContainer.style.display = 'block';
                    
                    saveToHistory(dreamContent, interpretation);
                } catch (error) {
                    resultContent.innerHTML = `<p style="color: red;">解析梦境时出错: ${error.message}</p>`;
                    resultContainer.style.display = 'block';
                } finally {
                    loading.style.display = 'none';
                }
            });
        }
        
        // 调用DeepSeek API解梦
        async function interpretDream(content, emotion, theme) {
            const apiKey = 'sk-c6a7fb0a88f04c45a858716ce9aec15c';
            const prompt = `作为一名专业的梦境解析师，请分析以下梦境：
            
梦境内容: ${content}
主要情绪: ${emotion || "未指定"}
主题: ${theme || "未指定"}

请从心理学角度分析这个梦境可能的含义，考虑常见的梦境象征意义，并结合梦者的情绪状态提供见解。分析应该包括：
1. 可能的象征意义解释
2. 与梦者现实生活的潜在联系
3. 心理学角度的解读
4. 如果有负面情绪，提供建议

用中文回答，语言要亲切、专业且富有洞察力。`;
            
            const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${apiKey}`
                },
                body: JSON.stringify({
                    model: 'deepseek-chat',
                    messages: [
                        {
                            role: 'user',
                            content: prompt
                        }
                    ],
                    temperature: 0.7,
                    max_tokens: 1000
                })
            });
            
            if (!response.ok) {
                throw new Error(`API请求失败: ${response.status}`);
            }
            
            const data = await response.json();
            let result = data.choices[0].message.content;
            
            // 过滤特殊符号，只保留中文、基本标点和常见符号
            result = result.replace(/[^\u4e00-\u9fa5\uff0c\u3002\uff01\uff1f\uff1a\uff1b\uff08\uff09\u2014\u2018\u2019\u201c\u201d\uff5e\uff0e\u3001\uff0d\uff3b\uff3d\u300a\u300b\u3008\u3009\u3010\u3011\u300e\u300f\u300c\u300d\ufe43\ufe44\u3014\u3015\u2026\u2014\uff5e\uff0d\uff3f]/g, '');
            
            return result;
        }
        
        // 保存解梦记录到本地存储
        function saveToHistory(dream, interpretation) {
            const history = JSON.parse(localStorage.getItem('dreamHistory') || '[]');
            const newRecord = {
                id: Date.now(),
                dream: dream.length > 50 ? dream.substring(0, 50) + '...' : dream,
                fullDream: dream,
                interpretation: interpretation,
                date: new Date().toLocaleString()
            };
            
            history.unshift(newRecord);
            localStorage.setItem('dreamHistory', JSON.stringify(history));
        }
        
        // 加载解梦历史记录
        function loadHistory() {
            const historyList = document.getElementById('history-list');
            const noHistory = document.getElementById('no-history');
            const history = JSON.parse(localStorage.getItem('dreamHistory') || '[]');
            
            if (history.length === 0) {
                noHistory.style.display = 'block';
                return;
            }
            
            noHistory.style.display = 'none';
            historyList.innerHTML = '';
            
            history.forEach(record => {
                const item = document.createElement('div');
                item.className = 'history-item';
                item.innerHTML = `
                    <div class="history-dream">${record.dream}</div>
                    <div class="history-date">${record.date}</div>
                `;
                
                item.addEventListener('click', () => {
                    showHistoryDetail(record);
                });
                
                historyList.appendChild(item);
            });
        }
        
        // 显示历史记录详情
        function showHistoryDetail(record) {
            const resultContainer = document.getElementById('result-container');
            const resultContent = document.getElementById('result-content');
            
            resultContent.innerHTML = `
                <h4>梦境内容</h4>
                <p>${record.fullDream}</p>
                <hr>
                <h4>解析结果</h4>
                <p>${record.interpretation}</p>
                <p><small>解析时间: ${record.date}</small></p>
            `;
            
            resultContainer.style.display = 'block';
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            createStars();
            setupNavigation();
            setupDreamForm();
        });
    </script>
</body>
</html>